<!--  竖版海报  -->
<template>
  <div class="page_vertical_poster">
    <van-nav-bar title="竖版海报" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="ellipsis" size="23" @click="show = true" />
      </template>
    </van-nav-bar>

    <van-action-sheet v-model="show" :actions="actions" cancel-text="取消" close-on-click-action @select="onSelect" />
    <!--  竖版海报  -->
    <div id='imageWrapper' ref="vertical_poster_image" :style="{backgroundImage:`url(${loginImage})`,height: 'calc(100vh - 50px)'}" class="vertical_poster">
      <div class="vertical_box">
        <!-- <qrcode-vue class="qr_code_v" :value="need_linkUrl_v" level="H"></qrcode-vue> -->
        <qriously :value="need_linkUrl_v" :size="200" option="transparent:true" foreground="#000" background="#ffffff"/>
        <div v-if="slogin == true">
          <div class="tip">扫码注册下载</div>
          <div class="tips">加好友／关注店铺／关注公司</div>
          <div class="jyfw">
            <div class="title">就业服务</div>
            <div class="xs">找工作、应聘、借支、发工资、等、一体化服务</div>
          </div>
          <div class="jyfw dzzqfw">
            <div class="title">推广赚钱服务</div>
            <div class="xs">通过线上线下推广近聘，推广企业用户赚企业提成，推广个人用户赚代招费。</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue'
import {mapGetters} from 'vuex'
import {base_url, base_url_company} from '../../constants/comUtils'
import {toScreenShotAndDownload} from '../../utils/comTools'
import html2canvas from 'html2canvas'
export default {
  name: 'verticalPoster',
  data() {
    return {
      linkUrl_v: base_url,
      linkUrl_company:base_url_company,
      show: false,
      slogin:true,
      loginImage:require('../../assets/vertical_poster.jpg'),
      actions: [
        {id: '1', name: '使用说明'},
        {id: '2', name: '保存到手机'},
        {id: '3', name: '打印贴纸'},
        {id: '4', name: '打印传单'},
        {id: '5', name: '打印海报'},
        {id: '6', name: '切换海报标语'}
      ]
    }
  },
  components: {
    QrcodeVue
  },
  computed: {
    ...mapGetters(['allUserInfo']),

    need_linkUrl_v() {
      let res
      if (this.$route.query.urlStr) {
        console.log('aaaaaaaa')
        console.log(this.$route.query.urlStr)
        console.log('bbbbb')
        res = this.$route.query.urlStr;
      } else {
        const {account, ids, company_id='', p=2 , certification_state, g = 2, company_certification_state}  = this.allUserInfo
        res = this.linkUrl_v + '?' + `rpId=${ids}&gId=${company_id}&p=${certification_state}&g=${company_certification_state}&st=V&account=${this.$Base64.encode(account)}`
      }
      return res
    }
  },


  methods: {
    // 这里把图片转base64
    // base64ToBlob (code) {
    //   let parts = code.split(';base64,')
    //   let contentType = parts[0].split(':')[1]
    //   let raw = window.atob(parts[1])
    //   let rawLength = raw.length
    //   let uInt8Array = new Uint8Array(rawLength)
    //   for (let i = 0; i < rawLength; ++i) {
    //     uInt8Array[i] = raw.charCodeAt(i)
    //   }
    //   return new Blob([uInt8Array], { type: contentType })
    // },
    onSelect(item) {
      console.log(item)
      let _self = this
      if (item.id === '2') {
        console.log('点击了', item.name)
        // 生成截图
        toScreenShotAndDownload(_self.$refs.vertical_poster_image)
      }
      if(item.id === "6"){
        console.log(_self.slogin)
        if(_self.slogin == false){
          _self.loginImage=require(`../../assets/vertical_poster.jpg`)
          _self.slogin = true
        }else{
          _self.loginImage=require(`../../assets/11.png`)
          _self.slogin = false
        }
        return
      }
      // html2canvas(document.getElementById("imageWrapper")).then(canvas => {
      //   let saveUrl = canvas.toDataURL('image/png')
      //   let aLink = document.createElement('a')
      //   let blob = this.base64ToBlob(saveUrl)
      //   let evt = document.createEvent('HTMLEvents')
      //   evt.initEvent('click', true, true)
      //   aLink.download = '二维码.jpg'
      //   console.log('qqqqq')
      //   aLink.href = URL.createObjectURL(blob)
      //   aLink.click()
      //   console.log(aLink.href)
      //   if (aLink.href) {
      //     console.log('保存成功')
      //   }
      // })

      this.$router.push({
        name: 'verticalPosterDetail',
        params: {
          item: JSON.stringify(item)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page_vertical_poster {
  width: 100%;
  position: relative;
  .vertical_poster {
    vertical-align: bottom;
    width: 100%;
    box-sizing: border-box;

    position: absolute;
    // background-image: url('../../assets/vertical_poster.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .vertical_box {
      width: 300px;
      height: 400px;
      // background: orange;
      margin: 0 auto; /*水平居中*/
      position: relative;
      top: 56%; /*偏移*/
      margin-top: -200px;

      // position: absolute;
      // width:100%;
      // top:30%;
      text-align: center;
      .qr_code_v {
        display: inline-block !important;
        // position: absolute !important;
        z-index: 666 !important;
        margin-bottom: 11px !important;
        left: 0;
        right: 0;
        margin: 0 auto;
        color: #000;
        text-align: center;
        width: 168px;
        height: 168px;
        /deep/ canvas{
          width: 100%!important;
          height: 100%!important;
        }
      }
      .tip {
        // position: absolute !important;
        z-index: 666 !important;
        left: 0;
        right: 0;
        margin: 0 auto;
        color: #ffffff;
        text-align: center;
        // top: 52%;
        font-weight: bolder;
        font-size: 18px;
      }
      .tips {
        // position: absolute !important;
        z-index: 666 !important;
        left: 0;
        right: 0;
        margin: 0 auto;
        color: #ffffff;
        text-align: center;
        margin-bottom: 20px;
        font-weight: bolder;
        font-size: 18px;
        margin-bottom: 15px;
      }
      .jyfw {
        width: 100%;
        height: 50px;
        color: #fff;
        margin: 0 auto;
        margin-bottom: 8px;
        .title {
          text-align: left;
          font-size: 18px;
        }
        .xs {
          text-align: left;
          font-size: 14px;
        }
      }
      .dzzqfw {
        margin-top: 5px;
      }
      .Common{
        .title{
          font-size: 20px;
          color:#fff;
          height:35px;
        }
        .xs {
          font-size: 16px;
          color:#fff;
          height:25px;
        }
      }
    }
  }
}
</style>
